<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/WEB-INF/templates/default.xhtml">
	<ui:define name="content">
		<h:form id="options">
			<div class="frmOpciones">
				<p:panel id="controles" styleClass="controles">
					<div class="inputOptions">
						<h:outputLabel value="Periodo" for="idPeriodo" />
						<p:selectOneMenu id="idPeriodo"
							value="#{proyeccionCategoriaClienteMBean.periodoDefault}">
							<f:selectItem itemLabel="- Periodo -" itemValue="0" />
							<f:selectItems
								value="#{proyeccionCategoriaClienteMBean.listaPeriodos}"
								var="periodo" itemLabel="#{periodo.descripcion}"
								itemValue="#{periodo.id}" />
						</p:selectOneMenu>
					</div>
					<div class="inputOptions">
						<h:outputLabel value="Zona" for="idZona" />
						<p:selectOneMenu id="idZona"
							value="#{proyeccionCategoriaClienteMBean.idZona}">
							<f:selectItem itemLabel="- Todos -" itemValue="0" />
							<f:selectItems
								value="#{proyeccionCategoriaClienteMBean.listaZonas}" var="zona"
								itemLabel="#{zona.codigo}" itemValue="#{zona.id}" />
						</p:selectOneMenu>
					</div>
					<div class="inputOptions">
						<h:outputLabel value="Canal" for="idCanal" />
						<p:selectOneMenu id="idCanal"
							value="#{proyeccionCategoriaClienteMBean.idCanal}">
							<f:selectItem itemLabel="- Todos -" itemValue="0" />
							<f:selectItems value="#{proyeccionCategoriaClienteMBean.listaCanales}"
								var="canal" itemLabel="#{canal.categoria}"
								itemValue="#{canal.id}" />
						</p:selectOneMenu>
					</div>
					<div class="inputOptions">
						<div class="buttomProyeccion">
							<p:commandButton value="Mostrar"
								actionListener="#{proyeccionCategoriaClienteMBean.inicializar()}"
								id="frmMostrar" update=":tabAvance:IdProyeccionCanal" />
						</div>
					</div>
				</p:panel>
			</div>
		</h:form>
		<p:tabView id="tabAvance" styleClass="tabAvance">
			<p:tab title="Avance Monto" id="tabGrafico"
				titleStyleClass="titleTab">
				<h:form id="IdProyeccionCanal">
					<p:panelGrid columns="2" layout="grid" styleClass="contentImagenes">
						<p:panel id="proyeccionAnual" styleClass="contentProyeccion"
							rendered="#{proyeccionCategoriaClienteMBean.mostrarBar}">
							<div class="titleProyeccion">Avance Anual</div>
							<p:panel id="detalle1" styleClass="avanceOpciones">
								<h:outputLabel value="Avance: " id="idAvance" />
								<h:outputLabel
									style="width: 205px; color:##{proyeccionCategoriaClienteMBean.selected.colorBandaGeneral}"
									value="S/.#{proyeccionCategoriaClienteMBean.selected.avanceMontoGeneral}"
									id="idMontoAvance" />
								<h:outputLabel value="Proyeccion: " id="idProyeccion" />
								<h:outputLabel style="width: 205px"
									value="S/. #{proyeccionCategoriaClienteMBean.selected.proyeccionMontoGeneral}"
									id="idMontoProyeccion" />
							</p:panel>
							<script type="text/javascript">
                        function ext() { 
                            this.cfg.seriesDefaults = { 
                                renderer: $.jqplot.BarRenderer,
                                rendererOptions: {
                                    varyBarColor : true,
                                }
                            };
                         	
                        }
                    </script>
							<div style="margin-top: 40px;">
								<p:barChart extender="ext" id="bar1"
									seriesColors="#{proyeccionCategoriaClienteMBean.colorGeneral}"
									value="#{proyeccionCategoriaClienteMBean.combinedModelGeneral}"
									animate="true" title="Avance Canales General" min="0"
									max="#{proyeccionCategoriaClienteMBean.maxMontoGeneral}">
									<p:ajax event="itemSelect"
										listener="#{proyeccionCategoriaClienteMBean.itemSelect}"
										update="detalle1 , detalle2" />
								</p:barChart>
							</div>
						</p:panel>
						<p:panel id="proyeccionPeriodo" styleClass="contentProyeccion"
							rendered="#{proyeccionCategoriaClienteMBean.mostrarBar}">
							<div class="titleProyeccion">Avance por Periodo</div>
							<p:panel id="detalle2" styleClass="avanceOpciones">
								<h:outputLabel value="Avance: " id="idAvancePeriodo" />
								<h:outputLabel
									style="width: 205px; color:##{proyeccionCategoriaClienteMBean.selected.colorBandaPeriodo}"
									value="S/.#{proyeccionCategoriaClienteMBean.selected.avanceMontoPeriodo}"
									id="idMontoAvancePeriodo" />
								<br />
								<h:outputLabel value="Proyeccion: " id="idProyeccionPeriodo" />
								<h:outputLabel style="width: 205px"
									value="S/.#{proyeccionCategoriaClienteMBean.selected.proyeccionMontoPeriodo}"
									id="idMontoProyeccionPeriodo" />
							</p:panel>
							<div style="margin-top: 25px;">
								<p:barChart extender="ext" id="bar2"
									seriesColors="#{proyeccionCategoriaClienteMBean.colorPeriodo}"
									value="#{proyeccionCategoriaClienteMBean.combinedModelPeriodo}"
									animate="true" title="Avance Canales Periodo" min="0"
									max="#{proyeccionCategoriaClienteMBean.maxMontoPeriodo}">
									<p:ajax event="itemSelect"
										listener="#{proyeccionCategoriaClienteMBean.itemSelect}"
										update="detalle1 , detalle2" />
								</p:barChart>
							</div>
						</p:panel>
					</p:panelGrid>
				</h:form>
			</p:tab>
			<p:tab title="Avance Productos" id="tabProducto"
				titleStyleClass="titleTab">
				<ui:include src="avancecanalproducto.xhtml" />
			</p:tab>
		</p:tabView>
	</ui:define>
</ui:composition>
</html>